<template>
  <div class="menu-tag">
    <el-button :icon="DArrowLeft" />
    <el-scrollbar class="scrollbar">
      <div class="scrollbar-content">
        <Tag class="tag-cell" v-for="(item, index) in tagList" :key="index" :title="item.text" :url="item.url" />
      </div>
    </el-scrollbar>
    <el-button :icon="DArrowRight" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
import Tag from './Tag.vue'

const tagList = ref([
  {
    text: '我的工作台',
    url: '/',
  },
  {
    text: '工具仓库',
    url: '/',
  },
])
</script>
<style lang="scss" scoped>
.menu-tag {
  display: flex;
  width: 100%;
  .scrollbar {
    margin: 0 10px;
    flex: 1;
  }
  .scrollbar-content {
    display: flex;
    align-items: center;
    .tag-cell {
      & + .tag-cell {
        margin-left: 10px;
      }
    }
  }
}
</style>
